<template>
    <view class="about_mine">
        <view class="navigate">
            <text
                v-for="(i, idx) in navList"
                :key="idx"
                :class="{ navigate_item: true, active: activeNav.type === i.type }"
                @click="swicthNav(i)"
                >{{ i.title }}</text
            >
        </view>
        <view class="content">
            <template v-if="activeNav.type === 1">
                <view v-for="(i, idx) in childrenList" :key="idx" class="children">
                    <image :src="studentHeadImage(i.sex)" mode="" class="children_avatar"></image>
                    <view>
                        <view class="name">
                            {{ i.name }}
                        </view>
                        <view class="time"> 有效期至：{{ i.endTime }} </view>
                    </view>
                </view>
            </template>
            <template v-else>
                <template v-if="equipmentList.length === 0">
                    <view v-for="(i, idx) in equipmentList" :key="idx" class="equipment">
                        序列号：<text class="serial">{{ i.serial }}</text>
                    </view>
                </template>

                <view v-else class="empty_box">
                    <image :src="empty" mode="" class="empty"></image>
                    <view class="tip">您还没有绑定任何数据，快去扫码绑定吧～</view>
                    <button class="btn">扫码绑定</button>
                </view>
            </template>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { studentHeadImage } from '@/hooks/useImage.js';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const empty = `${OSS_URL}/empty.png`;

const activeNav = ref({
    title: '我的设备',
    type: 2,
});
const navList = reactive([
    {
        title: '我的孩子',
        type: 1,
    },
    {
        title: '我的设备',
        type: 2,
    },
]);
const childrenList = ref([
    {
        sex: 1,
        name: '昵称',
        vip: 1,
        endTime: '2024.09.09',
    },
    {
        sex: 1,
        name: '昵称',
        vip: 1,
        endTime: '2024.09.09',
    },
]);
const equipmentList = ref([
    {
        serial: '16234992571504193',
    },
    {
        serial: '16234992571504193',
    },
    {
        serial: '16234992571504193',
    },
]);

function swicthNav(i) {
    activeNav.value = i;
}
</script>

<style lang="scss" scoped>
.about_mine {
    margin-top: 40rpx;

    .navigate {
        display: flex;

        &_item {
            margin-right: 50rpx;
            color: rgba(169, 170, 181, 1);
            font-size: 28rpx;
            line-height: 48rpx;
        }

        .active {
            position: relative;
            font-weight: 500;
            font-size: 32rpx;
            color: rgba(51, 51, 51, 1);

            &::after {
                position: absolute;
                bottom: -10rpx;
                left: 50%;
                transform: translateX(-50%);
                content: '';
                display: block;
                width: 30rpx;
                height: 8rpx;
                background-color: rgba(97, 93, 255, 1);
                border-radius: 8rpx;
            }
        }
    }

    .content {
        margin-top: 10rpx;

        .children {
            display: flex;
            align-items: center;
            padding: 30rpx;
            margin-bottom: 30rpx;
            border-radius: 20rpx;
            background-color: #fff;

            &_avatar {
                margin-right: 20rpx;
                width: 100rpx;
                height: 100rpx;
            }

            .name {
                margin-bottom: 5rpx;
                font-weight: 500;
                font-size: 30rpx;
                line-height: 45rpx;
                color: rgba(51, 51, 51, 1);
            }

            .time {
                font-size: 26rpx;
                line-height: 39rpx;
                color: rgba(102, 102, 102, 1);
            }
        }

        .equipment {
            margin-bottom: 30rpx;
            padding: 30rpx;
            border-radius: 20rpx;
            color: rgba(102, 102, 102, 1);
            font-size: 28rpx;
            background-color: #fff;

            .serial {
                color: rgba(51, 51, 51, 1);
            }
        }

        .empty_box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 692rpx;
            height: 602rpx;
            background-color: #fff;
            border-radius: 20rpx;

            .empty {
                width: 300rpx;
                height: 300rpx;
            }

            .tip {
                margin: 30rpx 0 50rpx 0;
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                line-height: 42rpx;
            }

            .btn {
                width: 440rpx;
                height: 90rpx;
                line-height: 90rpx;
                background-color: #615dff;
                color: #fff;
                font-size: 30rpx;
                font-weight: 500;
                border-radius: 20rpx;
            }
        }
    }
}
</style>
